<template>
  <div style="width:100%;height:100%;" id="bugs"></div>
</template>

<script>
  const echarts = require('echarts');
  export default {
    name: 'planMap',
    props: {
      planData: Array,
      actualData: Array
    },
    data() {
      return {};
    },
    methods: {
      init() {
        let bugsMap = echarts.init(document.getElementById('bugs'));
        let labelOption = {
          normal: {
            show: false,
            position: 'insideBottom',
            distance: 45,
            align: 'center',
            verticalAlign: 'middle',
            rotate: 90,
            formatter: '{name|{a}}',
            fontSize: 16,
            rich: {
              name: {
                textBorderColor: '#fff'
              }
            }
          }
        };
        let option = {
          // color: ['#67e0e3', '#4cabce', '#e5323e'],
          // color: ["#32c5e9", "#67e0e3", "#9fe6b8"],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['DAT-BUG', 'UAT-BUG', 'LIS-BUG']
          },
          toolbox: {
            show: false,
            orient: 'vertical',
            left: 'left',
            top: 'center',
            feature: {
              mark: {show: true},
              dataView: {show: true, readOnly: false},
              magicType: {show: true, type: ['line', 'bar']},
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          calculable: true,
          xAxis: [
            {
              type: 'category',
              axisTick: {show: false},
              data: ['任务一', '任务二', '任务三', '任务四', '任务五']
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: 'DAT-BUG',
              type: 'bar',
              barWidth: '20px',
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              },
              markPoint : {
                data : [
                  {type : 'max', name: '最大值'}
                ]
              },
              label: labelOption,
              data: [0, 4, 4, 1, 5]
            },
            {
              name: 'UAT-BUG',
              type: 'bar',
              barWidth: '20px',
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              },
              markPoint : {
                data : [
                  {type : 'max', name: '最大值'}
                ]
              },
              label: labelOption,
              data: [4, 7, 0, 5, 1]
            },
            {
              name: 'LIS-BUG',
              type: 'bar',
              barWidth: '20px',
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              },
              markPoint : {
                data : [
                  {type : 'max', name: '最大值'}
                ]
              },
              label: labelOption,
              data: [3, 0, 2, 5, 2]
            }
          ]
        };
        bugsMap.setOption(option);
        window.addEventListener('resize', function () {
          bugsMap.resize();
        });
        bugsMap.on('click', (params) => {
          this.$Message.info(params.name+'的'+params.seriesName+'为：'+params.value)
        });
      }
    },
    watch: {
      planData: {
        handler() {
          this.init()
        },
        deep: true
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.init()
      });
    }
  };
</script>
